<template>
    <div class="page-container">
        <el-backtop :right="100" :bottom="100" ref="refBackTop" :visibility-height="100" target=".el-main"></el-backtop>
        <!-- 搜索框 -->
        <div class="page-filter">
            <el-input v-model="searchId" placeholder="请输入管理员id" clearable @input="handleSearchId"/>
            <el-button type="primary" :icon="Search" @click="handleSearch">查找</el-button>
        </div>
        <!-- 列表数据 -->
        <div class="page-table">
                <el-table :data="logList" border style="width: 100%" stripe v-loading="loading" element-loading-text="拼命加载中...">
                    <el-table-column prop="id" label="日志ID" />
                    <el-table-column prop="adminId" label="管理员ID" />
                    <el-table-column prop="requestId" label="请求ID" />
                    <el-table-column prop="group" label="API分组" />
                    <el-table-column prop="method" label="API方法" />
                    <el-table-column prop="gmtCreate" label="操作时间">
                        <template #default="scope">
                            {{ friendTime(scope.row.gmtCreate) }}
                        </template>
                    </el-table-column>
                </el-table>
        </div>
        <!-- 分页 -->
        <div style="overflow: hidden;">
             <Pagination v-bind="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, reactive, ref } from 'vue';
import { post } from '@/utils/http'
import { ElMessage, ElBacktop } from 'element-plus';
import { Search } from '@element-plus/icons-vue'
import { friendTime } from '@/utils/DateFormatter'
import Pagination from '@/components/pagination/Pagination.vue';
import {ClassPagination} from '#/index'

//显示加载
const loading = ref(false)
//日志列表
const logList: TypeLog[] = reactive([])
//查找条件
const searchId = ref()
//分页对象
const pagination:ClassPagination = reactive(new ClassPagination())
const refBackTop = ref()
/**
 * 改变一页多少行,防止多次请求
 * @param value 一页多少行
 */
function handleSizeChange(value: number) {
    let tempCurrent = Math.ceil(pagination.total / value)
    if (tempCurrent <  pagination.currentPage) {
        pagination.currentPage = tempCurrent
    }
    pagination.pageSize = value
    getLogList()
}

/**
 * 改变当前页
 * @param value 当前页数
 */
function handleCurrentChange(value: number) {
    pagination.currentPage = value
    getLogList()
}
/**
 * 生命周期mounted请求数据
 */
onMounted(() => {
    getLogList()
})

/**
 * 获取日志列表
 */
function getLogList() {
    loading.value = true
    const params = {
        _gp: 'admin.log', _mt: 'list',
        page: pagination.currentPage, limit: pagination.pageSize, targetAdminId: searchId.value
    }
    post(params).then(res => {
        console.log(res)
        const { data, errmsg, errno } = res
        if (200 === errno) {
            logList.length = 0
            logList.push(...data.items)
            pagination.total = data.total
            nextTick(() => {
                loading.value = false
                refBackTop.value.$el.click?.()
            })
        } else {
            ElMessage.error(errmsg)
        }
    })
}
/**
 * 格式化id文本框
 */
function handleSearchId(){
    let reg = /^\d+$/
    if(!reg.test(searchId.value+'')){
        searchId.value = undefined
    }
}
/**
 * 查找
 */
function handleSearch() {
    getLogList()
}
</script>
<style scoped lang="less">
.page-filter {
    height: 100%;
    overflow-x: hidden;

    &>.el-input {
        width: 200px;
        margin-right: 5px;
    }
}
</style>